.pageWrap {
  height: 100%;
  position: relative;
  background-color: #ffffff;
}
.searchWrap {
  width: 100%;
  height: 120rpx;
  padding: 24rpx $xPagePadding;
  :deep(.uni-searchbar) {
    padding: 0;
  }
}
.scrollWrap {
  height: calc(100% - 244rpx);
}
.dataList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 $xPagePadding;
  > .item {
    width: 330rpx;
    height: 270rpx;
    border-radius: 40rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    flex-shrink: 0;
    > .img {
      width: 100%;
      height: 100%;
    }
    > .info {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: rgba($color: #000000, $alpha: 0.5);
      padding: 40rpx 30rpx;
      > .title {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #ffffff;
        line-height: 44rpx;
      }
      > .msg {
        opacity: 0.5;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #fff8f8;
        line-height: 44rpx;
      }
    }

    /* > .icon {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 2;
      width: 180rpx;
      height: 180rpx;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    } */
  }
  > .bgColorA {
    background-color: $xColor;
    > .icon {
      background-image: url("~@/static/img/online_book_icon_a.png");
    }
  }
  > .bgColorB {
    background-color: #ff909f;
    > .icon {
      background-image: url("~@/static/img/online_book_icon_b.png");
    }
  }
  > .bgColorC {
    background-color: #ff9660;
    > .icon {
      background-image: url("~@/static/img/online_book_icon_c.png");
    }
  }
  > .bgColorD {
    background-color: #57d1ab;
    > .icon {
      background-image: url("~@/static/img/online_book_icon_d.png");
    }
  }
}

.newsList {
  padding: 0 $xPagePadding;
  > .item {
    width: 100%;
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #f4f4f4;
    > .img {
      width: 276rpx;
      height: 160rpx;
      border-radius: 20rpx;
    }
    > .info {
      flex: 2;
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      flex-wrap: wrap;
      padding-left: 20rpx;
      > .title {
        width: 100%;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #000000;
        line-height: 40rpx;
      }
      > .foot {
        width: 100%;
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .time {
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #999999;
        }
        > .numWrap {
          display: flex;
          align-items: center;
          justify-content: center;
          > .num {
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: center;
            color: #999999;
            padding-left: 6rpx;
          }
        }
      }
    }
  }
}
